<template>
    <p style="text-align: left">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="BOM主题">
                <el-input v-model="formInline.BOMTopic" placeholder="请输入BOM主题" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getBomList">查询</el-button>
                <el-button type="success" @click="addBom">添加</el-button>
                <el-button type="warning" @click="exportBom">导出</el-button>
            </el-form-item>
        </el-form>
    </p>
    <el-table :data="bomList" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="70" align="left">
            <template #default="scope">
                {{ (scope.$index) + (pageIndex - 1) * pageSize + 1 }}
            </template>
        </el-table-column>
        <el-table-column prop="BOMNum" label="BOM编号" width="180" />
        <el-table-column prop="BOMTopic" label="BOM主题" width="180" />
        <el-table-column prop="Versions" label="版本" />
        <el-table-column prop="ArtifactType" label="成品类型" />
        <el-table-column prop="ArtifactName" label="日产量" />
        <el-table-column prop="Remark" label="备注" />
        <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="checkBomDetail(scope.row.BOMID)">查看Bom详情</el-button>
                <el-button link type="primary" size="small" @click="updBom(scope.row.BOMID)">编辑Bom</el-button>
                <el-button link type="danger" size="small" @click="open(scope.row.BOMID)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>

<script lang="ts" setup>
import axios from 'axios';
import { reactive, toRefs, ref } from "vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import { ElTable } from 'element-plus'
//引用路由
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();
const pageIndex = ref(1);
const pageSize = ref(10);
const totalCount = ref(0);
const bomList = ref([]);
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const formInline = reactive({
    BOMTopic: "",
    bomId: "",//BomId
});

//确认单个删除Bom弹框
const open = (BOMID: string) => {
    ElMessageBox.confirm(
        '确认要删除该条Bom信息吗?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delBom(BOMID);
        })
        .catch(() => {
          
        })
}
//单个删除Bom
const delBom = (BOMID: string) => axios.delete(`BOM/DelBomById?`, {
    params: {
        bomId: BOMID,
    }
}).then(res => {
    if (res.data > 0) {
        ElMessage.success("删除Bom成功");
        //调用显示Bom方法
        getBomList();
    }
    else {
        ElMessage.error("删除Bom失败");
    }
})
//导出Bom
const exportBom = () => {
    const downloadExcel = async () => {
        try {
            const response = await axios.get('BOM/ExportTab', {
                responseType: 'blob'
            });

            const url = window.URL.createObjectURL(new Blob([response.data]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'Bom管理表单.xlsx');
            document.body.appendChild(link);
            link.click();
            window.URL.revokeObjectURL(url);
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };

    downloadExcel();
};
const handleSizeChange = (val: number) => {
    console.log("Page Size Changed to: ", val);
    pageSize.value = val;
    getBomList();
};

const handleCurrentChange = (val: number) => {
    console.log("CurrentChange: ", val);
    pageIndex.value = val;
    getBomList();
};
//跳转到添加页面
const addBom = () => {
    router.push('/UserList/addbomInfo');
}
//跳转到修改Bom页面
const updBom = (BOMID: string) => {
    router.push(`/UserList/GetBomById?BOMID=${BOMID}`);
}
//跳转到查看Bom详情页面
const checkBomDetail = (BOMID: string) => {
    router.push(`/UserList/ShowBomDetail?BOMID=${BOMID}`);
}
//显示Bom方法
const getBomList = () => axios.get("BOM/GetBom", {
    params: {
        bomTopic: formInline.BOMTopic,
        pageIndex: pageIndex.value,
        pageSize: pageSize.value
    }
}).then(res => {
    bomList.value = res.data.Data;
    totalCount.value = res.data.TotalCount;
})



//调用显示Bom方法
getBomList();
</script>
